<template>
  <div>
    <el-container>
       <el-aside width="200px">
        <el-menu router :default-openeds="['0']">
          <el-submenu v-for="(dir,i) in $router.options.routes" :index="i+''" :key="i" v-if="dir.show">
            <template slot="title"><i class="el-icon-menu"></i>{{dir.name}}</template>
            <el-menu-item v-for="(child, j) in dir.children"
                          :index="child.path"
                          :key="j"
                          :class="child.name == $route.name?'is-active':'' ">{{child.name}}</el-menu-item>
          </el-submenu>
            <el-menu-item index="menu3">
                <i class="el-icon-menu"></i>
                <span slot="title"><a href="/map3d">3D演示</a></span>
            </el-menu-item>
        </el-menu>
      </el-aside>
     <router-view></router-view>

    </el-container>
  </div>
</template>

<style lang="stylus" scoped>
@import '~styles/theme.styl'
@import '~styles/mixins.styl'
.el-header
  background-color: #B3C0D1
  color: #333
  line-height: 60px

#app
  .el-container
    height: 700px
    border: 3px solid #eee

    .el-aside
      background-color: $red
      color: $lightgreen

</style>

<script>
import 'path'
export default {
  data() {
    const item = {
      //date: '2016-05-02',
      name: '',
      //address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(20).fill(item)
    }
  }
};
</script>